<template>
    <h1>(管理员)用户投资赎回列表</h1>

    <table class="table table-bordered" border="2">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>用户已投资金额</th>
                <th>剩余投资金额</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in InversShow">
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Amount }}</td>
                <td>
                    <a href="#" @click="jump(item.I_Id)">用户赎回明细</a>
                </td>
            </tr>
        </tbody>

    </table>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import {useStore} from '../../store/index.ts'

//创建路由实例
const router = useRouter();

const store = useStore();

//用于显示的响应式数组
const InversShow = ref([{
    I_Id:0,
    I_Name:"",
    I_Budget:"",
    I_Receive:"",
    I_Amount:"",
    UI_Id:0,
}]);


onMounted(()=>{
    ShowInvers();
})

//显示所有数据的方法-
const ShowInvers =() =>{
    axios({
        url:"http://localhost:53279/api/Invest/ShowAllUserInvestInfo",
        method:"get",
        params:{
            UId:store.UserId,
        }
    })
    .then(function(res){
        console.log(res.data);
        InversShow.value = res.data;
    })
    .catch(function(err){
        console.log(err);
    })
}

const jump = (I_Id:number) =>{
    //alert(UI_Id)
    router.push({
    name:"UserInversRedeer",
    params:{
        I_Id:I_Id,
    }
})

}

</script>